<template>
  <div class="payment-page">
    <el-card class="payment-card">
      <template #header>
        <div class="card-header">
          <h2>订单支付</h2>
        </div>
      </template>
      
      <div class="order-info">
        <p>订单号：{{ orderInfo.orderNo }}</p>
        <p>支付金额：¥{{ orderInfo.amount }}</p>
      </div>
      
      <div class="qrcode-container">
        <el-image 
          :src="qrCodeUrl" 
          alt="收款码" 
          class="qrcode-image"
          :preview-src-list="[qrCodeUrl]"
          fit="contain"
          @error="handleImageError"
        >
          <template #error>
            <div class="image-error">
              <el-icon><Picture /></el-icon>
              <span>图片加载失败</span>
            </div>
          </template>
        </el-image>
        <p class="qrcode-tip">请使用支付宝或微信扫码支付</p>
      </div>
      
      <div class="payment-actions">
        <el-button type="primary" @click="checkPaymentStatus">我已支付</el-button>
        <el-button @click="cancelPayment">取消支付</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const orderInfo = ref({
  orderNo: '',
  amount: '',
  qrCodeUrl: ''
})

// 收款码图片路径
const qrCodeUrl = ref('http://localhost:8081/qrcode/payment.jpg')

// 处理图片加载错误
const handleImageError = () => {
  ElMessage.error('收款码图片加载失败，请检查图片路径')
  console.error('收款码图片加载失败，当前路径：', qrCodeUrl.value)
}

// 获取订单信息
const getOrderInfo = async () => {
  try {
    const orderNo = route.params.orderNo
    const response = await axios.post(`/api/payment/pay/${orderNo}`)
    orderInfo.value = response.data
  } catch (error) {
    ElMessage.error('获取订单信息失败')
  }
}

// 检查支付状态
const checkPaymentStatus = async () => {
  try {
    await axios.post(`/api/payment/paid/${orderInfo.value.orderNo}`)
    ElMessage.success('支付成功')
    router.push('/payment/list')
  } catch (error) {
    ElMessage.error('更新支付状态失败')
  }
}

// 取消支付
const cancelPayment = async () => {
  try {
    await axios.post(`/api/payment/cancel/${orderInfo.value.orderNo}`)
    ElMessage.success('订单已取消')
    router.push('/payment/list')
  } catch (error) {
    ElMessage.error('取消订单失败')
  }
}

onMounted(() => {
  getOrderInfo()
})
</script>

<style scoped>
.payment-page {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.payment-card {
  width: 400px;
}

.card-header {
  text-align: center;
}

.order-info {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.order-info p {
  margin: 10px 0;
  font-size: 16px;
}

.qrcode-container {
  text-align: center;
  margin: 20px 0;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

.qrcode-tip {
  color: #666;
  font-size: 14px;
}

.payment-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
</style> 